#tournament-calendar {
  user-select: none;

  group {
    @extend %flex-column;

    width: 100%;
    position: relative;
  }

  days {
    margin-top: 22px;
  }

  day {
    display: flex;
    align-items: center;

    &:nth-child(even) {
      background: $c-bg-zebra;
    }

    date {
      flex: 0 0 40px;
      margin-left: -55px;
      margin-right: 15px;
    }

    lanes {
      flex: 1 1 100%;
      overflow: hidden;
      padding: 5px 0;
    }

    lane {
      display: block;
      width: 100%;
      height: 2.3em;
      position: relative;
    }
  }

  .tournament {
    @extend %box-radius, %flex-center;

    position: absolute;
    top: 0;
    padding: 4px 0;
    background-color: #303e43;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    transition: filter 0.13s;
    color: #fff;
    white-space: nowrap;
    font-size: 0.9em;

    &:hover {
      filter: brightness(1.08);
    }

    &.hourly {
      background-color: #3d9333;
    }

    &.daily,
    &.eastern {
      background-color: #0072b2;
    }

    @keyframes animatedBackground {
      from {
        background-position: 0 0;
      }

      to {
        background-position: 0 1000%;
      }
    }

    &.weekly,
    &.weekend,
    &.monthly,
    &.marathon,
    &.yearly {
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
      letter-spacing: 1px;
      background-image: url(../images/grain.png);
      animation: animatedBackground 50s linear infinite;
    }

    &.weekly {
      background-color: #d55e00;
    }

    &.monthly {
      background-color: #c93d3d;
    }

    &.yearly,
    &.weekend {
      background-color: $c-brag;
    }

    &.marathon {
      background-color: #66558c;
    }

    &.unique {
      background-color: $c-brag;
    }

    &.max-rating {
      background-color: #8572ff;
    }

    &.yesterday {
      text-align: right;
      padding-right: 5px;
    }

    .icon {
      font-size: 1.3em;
      margin: 2px 1px -1px 3px;
    }

    .body {
      flex: 1 0;
      margin-right: 0;
      overflow: hidden;
    }
  }

  .timeline {
    @extend %abs-100;

    border-top: $border;
  }

  .timeheader {
    position: absolute;
    display: inline;
    height: 100%;
    border-left: 1px dashed $c-border;
    padding: 2px 5px;

    &:first-child {
      border: none;
    }
  }
}
